<template>
  <div>御剑乘风来,除魔天地间!====home组件
    <p v-qq>1111</p>
    <input v-ipt="q1" type="text" name="" id="" placeholder="请输入内容~~~~~">
    <br>
    <router-link to="/about">我是全局自定义指令的按钮</router-link>
    <br>
    <router-link to="/s1">我是私有指令的按钮</router-link>
    <br>
    <router-link to="/ifShow">我是if+show的按钮</router-link>
    <hr>
    <transition>
      <router-view></router-view>
    </transition>
    <!-- =========
    {{message | ff(123)}}
    <br>
    ===原始写法=={{time|tt}}===
    <br>=====moment==
    {{time|tt2}}-->
  </div>
</template>
           
<script>
export default {
  data() {
    return {
      q1: "我是表单",
      message: "hello  world",
      time: new Date()
    };
  }
};
</script>
<style scoped  lang='less'>
input {
  border: 1px solid red;
}

.v-enter,.v-leave-to{
  opacity: 0;
  transform:translate(100%);
}

.v-enter-active,.v-leave-active{
  opacity: 1;
  transform:translate(0%);
  transition:all 2s;
}

.v-enter-to,.v-leave{
 transform:translate(-100%);
}

</style>